<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <!-- Meta -->
    <meta name="description" content="Premium Quality and Responsive UI for Dashboard."/>
    <meta name="author" content="ThemePixels"/>

    <link rel="shortcut icon" th:href="@{/picture/favicon.ico}" type="image/x-icon"/>
    <title>茅台·天津 | 会员管理系统</title>

    <!-- vendor css -->
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link th:href="@{/css/ionicons.css}" rel="stylesheet"/>
    <link th:href="@{/css/perfect-scrollbar.css}" rel="stylesheet"/>
    <link th:href="@{/css/github.css}" rel="stylesheet"/>
    <link th:href="@{/css/jquery.datatables.css}" rel="stylesheet"/>
    <link th:href="@{/css/select2.min.css}" rel="stylesheet"/>


    <!-- Starlight CSS -->
    <link rel="stylesheet" th:href="@{/css/starlight.css}"/>

    <style type="text/css">
        table.info{border:solid #add9c0; border-width:1px 0px 0px 1px; }
        table.info th{border: solid #add9c0; border-width: 0px 1px 1px 0px; padding: 9px;}
        table.info td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding:9px;}
    </style>
</head>

<body>

<!-- ########## START: LEFT PANEL ########## -->
<div class="sl-logo"><a href=""><img th:src="@{/picture/mt_logo_wh.jpg}" style="width: 30px; height: 30px;"/> <span
        style="font-size: 18px">会员管理系统</span></a></div>
<div class="sl-sideleft">

    <label class="sidebar-label">导航栏</label>
    <div class="sl-sideleft-menu">
        <a href="#" class="sl-menu-link active show-sub">
            <div class="sl-menu-item">
                <i class="menu-item-icon icon ion-ios-paper-outline tx-20"></i>
                <span class="menu-item-label">客户管理</span>
                <i class="menu-item-arrow fa fa-angle-down"></i>
            </div><!-- menu-item -->
        </a><!-- sl-menu-link -->
        <ul class="sl-menu-sub nav flex-column">
            <li class="nav-item"><a th:href="@{/customer/list}" class="nav-link active">客户列表</a></li>
            <li class="nav-item"><a th:href="@{/customer/addCustomer}" class="nav-link">新增客户</a></li>
            <li class="nav-item"><a th:href="@{/company/list}" class="nav-link">企业列表</a></li>
            <li class="nav-item"><a th:href="@{/customer/cusLevelList}" class="nav-link">客户等级列表</a></li>
        </ul>

        <a th:href="@{/about}" class="sl-menu-link">
            <div class="sl-menu-item">
                <i class="menu-item-icon icon ion-ios-bookmarks-outline tx-20"></i>
                <span class="menu-item-label">关于</span>
            </div><!-- menu-item -->
        </a><!-- sl-menu-link -->
    </div><!-- sl-sideleft-menu -->

</div><!-- sl-sideleft -->
<!-- ########## END: LEFT PANEL ########## -->

<!-- ########## START: HEAD PANEL ########## -->
<div class="sl-header">
    <div class="sl-header-left">
        <div class="navicon-left hidden-md-down"><a id="btnLeftMenu" href=""><i class="icon ion-navicon-round"></i></a>
        </div>
        <div class="navicon-left hidden-lg-up"><a id="btnLeftMenuMobile" href=""><i class="icon ion-navicon-round"></i></a>
        </div>
    </div><!-- sl-header-left -->
    <div class="sl-header-right">
        <nav class="nav">
            <div class="dropdown">
                <a href="" class="nav-link nav-link-profile" data-toggle="dropdown">
                    <span class="logged-name" th:text="${user.companyShortName} + ' | ' + ${user.name}">海津皇冠 | 皇冠</span>
                    <img th:src="@{/picture/moutai.png}" class="wd-32 rounded-circle" alt=""/>
                </a>
                <div class="dropdown-menu dropdown-menu-header wd-200">
                    <ul class="list-unstyled user-profile-nav">
                        <li><a href=""><i class="icon ion-ios-person-outline"></i> Edit Profile</a></li>
                        <li><a href=""><i class="icon ion-ios-gear-outline"></i> Settings</a></li>
                        <li><a href=""><i class="icon ion-ios-download-outline"></i> Downloads</a></li>
                        <li><a href=""><i class="icon ion-ios-star-outline"></i> Favorites</a></li>
                        <li><a href=""><i class="icon ion-ios-folder-outline"></i> Collections</a></li>
                        <li><a th:href="@{/logout}"><i class="icon ion-power"></i> Sign Out</a></li>
                    </ul>
                </div><!-- dropdown-menu -->
            </div><!-- dropdown -->
        </nav>
        <div class="navicon-right">
            <a id="btnRightMenu" href="" class="pos-relative">
                <i class="icon ion-ios-bell-outline"></i>
                <!-- start: if statement -->
                <span class="square-8 bg-danger"></span>
                <!-- end: if statement -->
            </a>
        </div><!-- navicon-right -->
    </div><!-- sl-header-right -->
</div><!-- sl-header -->
<!-- ########## END: HEAD PANEL ########## -->

<!-- ########## START: RIGHT PANEL ########## -->

<!-- ########## END: RIGHT PANEL ########## -->

<!-- ########## START: MAIN PANEL ########## -->
<div class="sl-mainpanel">
    <nav class="breadcrumb sl-breadcrumb">
        <!--<a class="breadcrumb-item" th:href="@{/activity/list}">茅台销售登记系统</a>-->
        <a class="breadcrumb-item" href="#">会员管理</a>
        <span class="breadcrumb-item active">会员列表</span>
    </nav>

    <div class="sl-pagebody">

        <div class="card pd-20 pd-sm-40">
            <h6 class="card-body-title">会员列表</h6>
            <p class="mg-b-20 mg-sm-b-15">The list of register customer's information.</p>

            <div class="input-group mg-b-10">
                <input type="text" class="form-control clo-sm-6 col-md-2" name="nameOrContact" th:value="${nameOrContact}"
                       placeholder="按姓名/联系方式查询"/>
                <span class="input-group-btn mg-r-20">
                    <button class="btn bd bg-white tx-gray-600" id="bt_search_nameOrContact"><i class="fa fa-search"></i></button>
                </span>
                <span>&nbsp;&nbsp;</span>
                <input type="text" class="form-control clo-sm-6 col-md-2" name="companyName" th:value="${companyName}"
                       placeholder="按公司名称查询"/>
                <span class="input-group-btn mg-r-20">
                    <button class="btn bd bg-white tx-gray-600" id="bt_search_companyName"><i class="fa fa-search"></i></button>
                </span>
                <span>&nbsp;&nbsp;</span>
                <select class="select2 clo-sm-6 col-md-2" data-placeholder="请选择客户级别" id="customerLevelSel" name="level">

                </select>
                <span>&nbsp;&nbsp;</span>
                <input name="levelId" type="hidden" th:value="${levelId}"/>
                <a class="btn btn-info active btn-block col-lg-1 col-md-2 col-sm-3" th:href="@{/customer/list}">清空检索</a>
                <!--<a class="btn btn-info active btn-block col-lg-3" th:href="@{'/saleRecordForm?activityId=' + ${activityId}}">新增会员</a>-->
            </div><!-- row -->

            <div>
            <div class="table-responsive">
                <table class="table table-hover table-bordered mg-b-0">
                    <thead class="bg-info">
                    <tr>
                        <th class="wd-5p" style="text-align: center">
                            <label class="ckbox mg-b-0">
                                <input type="checkbox"/><span></span>
                            </label>
                        </th>
                        <th class="wd-15p" style="text-align: center">客户名称</th>
                        <th class="wd-15p" style="text-align: center">联系方式</th>
                        <th class="wd-25p" style="text-align: center">公司名称</th>
                        <th class="wd-10p" style="text-align: center">积分</th>
                        <th class="wd-10p" style="text-align: center">会员等级</th>
                        <th class="wd-25p" style="text-align: center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="cus : ${page.list}">
                        <td style="text-align: center">
                            <label class="ckbox mg-b-0">
                                <input type="checkbox"/><span></span>
                            </label>
                        </td>
                        <td style="text-align: center" th:text="${cus.name}"></td>
                        <td style="text-align: center" th:text="${cus.contact1}">00000000000</td>
                        <td style="text-align: center" th:if="${cus.comName != null}" th:text="${cus.comName}"></td>
                        <td style="text-align: center" th:unless="${cus.comName != null}" th:text="--------"></td>
                        <td style="text-align: center" th:text="${cus.score}"></td>
                        <td style="text-align: center" th:text="${cus.level}"></td>
                        <td style="text-align: center">
                            <a data-toggle="modal" href="#showCusDet" th:id="${cus.id}" class="id">查看</a>&nbsp;&nbsp;<a href="#">编辑</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div><!-- table-responsive -->

            <div class="modal fade" id="showCusDet" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content" id="modalContent">

                    </div>
                </div>
            </div>

            <!--页码 start-->
            <div class="ht-80 bd d-flex align-items-center justify-content-center">
                <nav aria-label="Page navigation">
                    <ul class="pagination pagination-basic mg-b-0">

                        <li th:class="page-item">
                            <a class="page-link" aria-label="First" th:if="${page.pageNum le 1}" href="#">
                                <i class="fa fa-angle-double-left"></i>
                            </a>
                            <a class="page-link" aria-label="First"
                               th:if="${page.pageNum gt 1} and ${page.pageNum le 10}"
                               th:href="@{/customer/list(nameOrContact=${nameOrContact}, companyName=${companyName}, levelId=${levelId})}">
                                <i class="fa fa-angle-double-left"></i>
                            </a>
                            <a class="page-link" aria-label="First" th:if="${page.pageNum gt 10}"
                               th:href="@{/customer/list(nameOrContact=${nameOrContact}, companyName=${companyName}, levelId=${levelId}, pageNum=${page.pageNum} - 10)}">
                                <i class="fa fa-angle-double-left"></i>
                            </a>
                        </li>

                        <li th:class="page-item">
                            <a class="page-link" aria-label="previous" th:if="${page.pageNum le 1}" href="#">
                                <i class="fa fa-angle-left"></i>
                            </a>
                            <a class="page-link" aria-label="previous" th:if="${page.pageNum gt 1}"
                               th:href="@{/customer/list(nameOrContact=${nameOrContact}, companyName=${companyName}, levelId=${levelId}, pageNum=${page.pageNum} - 1)}">
                                <i class="fa fa-angle-left"></i>
                            </a>
                        </li>

                        <li th:if="${page.pages le 1}" class="page-item active"><a class="page-link" href="#">1</a></li>
                        <th:block th:if="${page.pages gt 1 &amp;&amp; page.pages le 10}">
                            <li th:each="currentPage : ${#numbers.sequence(1, page.pages)}"
                                th:class="${currentPage eq page.pageNum} ? 'page-item active' : 'page-item'">
                                <a th:if="${page.pageNum eq currentPage}" class="page-link" href="#"
                                   th:text="${currentPage}"/>
                                <a th:if="${page.pageNum ne currentPage}" class="page-link"
                                   th:href="@{/customer/list(nameOrContact=${nameOrContact}, companyName=${companyName}, levelId=${levelId}, pageNum=${currentPage})}"
                                   th:text="${currentPage}"/>
                            </li>
                        </th:block>
                        <th:block th:if="${page.pages gt 10 &amp;&amp; page.pageNum le 10}">
                            <li th:each="currentPage : ${#numbers.sequence(1, 10)}"
                                th:class="${currentPage eq page.pageNum} ? 'page-item active' : 'page-item'">
                                <a th:if="${page.pageNum eq currentPage}" class="page-link" href="#"
                                   th:text="${currentPage}"/>
                                <a th:if="${page.pageNum ne currentPage} and ${currentPage le 10}" class="page-link"
                                   th:href="@{/customer/list(nameOrContact=${nameOrContact}, companyName=${companyName}, levelId=${levelId}, pageNum=${currentPage})}"
                                   th:text="${currentPage}"/>
                            </li>
                        </th:block>
                        <th:block th:if="${page.pages gt 10 &amp;&amp; page.pageNum gt 10 &amp;&amp; (page.pages - page.pageNum) ge 10}">
                            <li th:each="currentPage : ${#numbers.sequence(page.pageNum - 4, page.pageNum + 5)}"
                                th:class="${currentPage eq page.pageNum} ? 'page-item active' : 'page-item'">
                                <a th:if="${page.pageNum eq currentPage}" class="page-link" href="#"
                                   th:text="${currentPage}"/>
                                <a th:if="${page.pageNum ne currentPage} and ${(page.pageNum - currentPage) lt 5} and ${(page.pageNum - currentPage) ge -5}"
                                   class="page-link"
                                   th:href="@{/customer/list(nameOrContact=${nameOrContact}, companyName=${companyName}, levelId=${levelId}, pageNum=${currentPage})}"
                                   th:text="${currentPage}"/>
                            </li>
                        </th:block>
                        <th:block th:if="${page.pages gt 10 &amp;&amp; page.pageNum gt 10 &amp;&amp; (page.pages - page.pageNum) lt 10}">
                            <li th:each="currentPage : ${#numbers.sequence(page.pageNum - 4, ((page.pageNum + 5) lt page.pages ? page.pageNum + 5 : page.pages))}"
                                th:class="${currentPage eq page.pageNum} ? 'page-item active' : 'page-item'">
                                <a th:if="${page.pageNum eq currentPage}" class="page-link" href="#"
                                   th:text="${currentPage}"/>
                                <a th:if="${page.pageNum ne currentPage} and ${(page.pageNum - currentPage) le 5} and ${(page.pageNum - currentPage) ge -5}"
                                   class="page-link"
                                   th:href="@{/customer/list(nameOrContact=${nameOrContact}, companyName=${companyName}, levelId=${levelId}, pageNum=${currentPage})}"
                                   th:text="${currentPage}"/>
                            </li>
                        </th:block>

                        <li class="page-item">
                            <a class="page-link" aria-label="Next" th:if="${page.pageNum eq page.pages &amp;&amp; page.pages ne 0}" href="#">
                                <i class="fa fa-angle-right"></i>
                            </a>
                            <a class="page-link" aria-label="Next" th:if="${page.pages eq 0}" href="#">
                                <i class="fa fa-angle-right"></i>
                            </a>
                            <a class="page-link" aria-label="Next" th:if="${page.pageNum lt page.pages}"
                               th:href="@{/customer/list(nameOrContact=${nameOrContact}, companyName=${companyName}, levelId=${levelId}, pageNum=${page.pageNum} + 1)}">
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>

                        <li class="page-item">
                            <a class="page-link" aria-label="Last" th:if="${page.pageNum eq page.pages}" href="#">
                                <i class="fa fa-angle-double-right"></i>
                            </a>
                            <a class="page-link" aria-label="Last"
                               th:if="${page.pageNum ne page.pages} and ${page.pages ge (page.pageNum+10)}"
                               th:href="@{/customer/list(nameOrContact=${nameOrContact}, companyName=${companyName}, levelId=${levelId}, pageNum=${page.pageNum} + 10)}">
                                <i class="fa fa-angle-double-right"></i>
                            </a>
                            <a class="page-link" aria-label="Last"
                               th:if="${page.pageNum ne page.pages} and ${page.pages lt (page.pageNum+10)}"
                               th:href="@{/customer/list(nameOrContact=${nameOrContact}, companyName=${companyName}, levelId=${levelId}, pageNum=${page.pages})}">
                                <i class="fa fa-angle-double-right"></i>
                            </a>
                        </li>

                    </ul>
                </nav>
            </div>
            <!--页码 end-->
            </div>

        </div><!-- card -->

    </div><!-- sl-pagebody -->
    <footer class="sl-footer">
        <div class="footer-left">
            <div class="mg-b-2">Copyright &copy; 2018. 天津海津皇冠贸易有限公司. All Rights Reserved.</div>
        </div>
        <div class="footer-right d-flex align-items-center">Made by 海津皇冠.</div>
    </footer>
</div><!-- sl-mainpanel -->
<!-- ########## END: MAIN PANEL ########## -->


<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/popper.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/js/perfect-scrollbar.jquery.js}"></script>
<script th:src="@{/js/highlight.pack.js}"></script>
<script th:src="@{/js/jquery.datatables.js}"></script>
<script th:src="@{/js/datatables.responsive.js}"></script>
<script th:src="@{/js/select2.min.js}"></script>

<script th:src="@{/js/starlight.js}"></script>
<script th:src="@{/custom/customer-list.js}"></script>

</body>
</html>
